/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Card, Row, Col, Input, Button, DatePicker, Select, Tag,message } from 'antd';
import style from './GasEnter.less';
import MyTable from '../../components/common/MyTable';
import Container from '../../components/common/Container';
import PublicService from '../../services/PublicService';
import request from '../../utils/request';
import moment from 'moment';
import MyModal from '../../components/common/MyModal';
import AddModal from './sub/AddModal';
const Option = Select.Option;

class GasSelf extends Component {

    constructor(props) {
        super(props)
        this.columns = [
            {
                title: '序号',
                dataIndex: 'num',
                width: '8%',
                align: "center",
                key: "1111",
            },
            {
                title: '时间',
                dataIndex: 'takeTime',
                width: '15%',
                align: "center",
                key: "1",
            },
            {
                title: '操作方向',
                dataIndex: 'direction',
                width: '15%',
                align: "center",
                key: "146",
            },

            {
                title: '11.6Kg',
                dataIndex: 'number116',
                width: '15%',
                align: "center",
                key: "3",

            },
            {
                title: '14.5Kg',
                width: '15%',
                dataIndex: 'number145',
                align: "center",
                key: "4",

            },
            {
                title: '50Kg',
                dataIndex: 'number500',
                width: '15%',
                align: "center",
                key: "5",

            },

            {
                title: '操作',
                dataIndex: 'userName',
                width: '10%',
                align: "center",
                key: "10",
                render: (text, record) => {
                    return <Tag color="#2db7f5" onClick={this.onDetails.bind(this, record)} size="small">详情</Tag>

                }
            },

        ];

    }



    state = {
        addModal: false,
        loading: false,
        direction: "",
        gasStationId: 1,
        timeEnd: null,
        timeStart: null,
        dataSource: [],
        pageIndex: 1,
        pageSize: 10,
        selectedRowKeys: [],
        selectedRows: [],
        Airtext:"",
        AirArr:[]
    }

    componentDidMount() {
        this.onSave(1, 10)
    }

    //详情按钮
    onDetails = (record) => {
        console.log(record)
    }
    //下拉
    onSelect = (v) => {
        console.log(v)
        this.setState({
            direction: v
        })
    }
    //日期
    onDatePicker = (m, t, v) => {
        console.log(m, t, v)
        this.setState({
            [m]: t
        })
    }

    //查询按钮
    onSave = (page, rows) => {
        let data = {
            direction: this.state.direction,
            gasStationId: this.state.gasStationId,
            page: page,
            rows: rows,
            timeEnd: this.state.timeEnd ? moment(this.state.timeEnd).format("YYYY-MM-DD HH:mm:ss") : "",
            timeStart: this.state.timeStart ? moment(this.state.timeStart).format("YYYY-MM-DD HH:mm:ss") : "",
        }

        request({
            url: `/zhrq-web/gas/airsuction/pagingQuery`,
            method: 'POST',
            data: data
        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                data.ret.items.forEach((item) => {
                    item.takeTime = moment(item.takeTime).format("YYYY-MM-DD HH:mm")
                })
                this.setState({
                    dataSource: data.ret.items
                })
            }
        })
    }

    onSelectChange = (keys, rows) => {
        this.setState({
            selectedRowKeys: keys,
            selectedRows: rows
        });
    };
    //进气按钮
    onAir = () => {
        this.setState({
            AirArr:[
                {
                    type: 'datePicker',
                    name: "进气时间",
                    paramName: "takeTime",
                    key: "2",
                    initialValue:moment()
                },
                {
                    type: 'input',
                    name: "11.6Kg进气量",
                    paramName: "type116",
                    key: "1"
                },
                {
                    type: 'input',
                    name: "14.5Kg进气量",
                    paramName: "type145",
                    key: "3"
                },
                {
                    type: 'input',
                    name: "50Kg进气量",
                    paramName: "type500",
                    key: "4"
                }
            ]
        })
        this.setState({
            Airtext:"进气台账录入",
            addModal:true
        })
    }

    //销售按钮
    onSell = () => {
        this.setState({
            AirArr:[
                {
                    type: 'datePicker',
                    name: "销售时间",
                    paramName: "takeTime",
                    key: "2",
                    initialValue:moment()
                },
                {
                    type: 'input',
                    name: "11.6Kg销售量",
                    paramName: "type116",
                    key: "1"
                },
                {
                    type: 'input',
                    name: "14.5Kg销售量",
                    paramName: "type145",
                    key: "3"
                },
                {
                    type: 'input',
                    name: "50Kg销售量",
                    paramName: "type500",
                    key: "4"
                },
                {
                    type: 'input',
                    name: "用户名称",
                    paramName: "userName",
                    key: "5",
                    width:"150px"
                },
                {
                    type: 'input',
                    name: "用户地址",
                    paramName: "userSite",
                    key: "6",
                    width:"150px"
                }
            ]
        })
        this.setState({
            Airtext:"销售台账录入",
            addModal:true
        })
    }


        // 取消保存
        ModalCancel = (type) => {
            let t = this;
            t.setState({
                [type]: false,
                modalBtnLoading: false
            })
        };

        //确认按钮
        ModalOk = (val, type, v) => {
            console.log(val,type,v)
            val.takeTime = moment(val.takeTime).format("YYYY-MM-DD HH:mm:ss")
            if(this.state.Airtext == "进气台账录入") {
                let data = {
                    recorder:"系统管理员",
                    remark:"无",
                    gasStationId:1,
                    ...val

                }
                request({
                    url: `/zhrq-web/gas/airsuction/save`,
                    method: 'POST',
                    data: data
                }).then(data => {
                    console.log(data)
                    if(data.rc == 0) {
                        message.success("新增成功")
                    }
                })

            }

            if(this.state.Airtext == "销售台账录入") {
                let data = {
                    recorder:"系统管理员",
                    remark:"无",
                    gasStationId:1,
                    ...val

                }
                request({
                    url: `/zhrq-web/gas/salesofparameter/save`,
                    method: 'POST',
                    data: data
                }).then(data => {
                    console.log(data)
                    if(data.rc == 0) {
                        message.success("新增成功")
                    }
                })

            }

            this.setState({
                addModal:false
            })
        }

    render() {
        const { loading, dataSource, pageIndex, pageSize, selectedRowKeys, selectedRows,addModal } = this.state
        const windowWidth = document.body.clientWidth;
        const columns = this.columns
        const height = document.body.clientHeight;
        let containerHeight = '69vh';
        if (windowWidth > 1367) {
            containerHeight = '69vh';
        }

        let rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        return (
            <div>
{
                    addModal &&
                    <AddModal
                        // type={type}
                        visible={addModal}
                        title={this.state.Airtext}
                        // modalBtnLoading={modalBtnLoading}
                        footerShow={true}
                        onModalSave={this.ModalOk}
                        onCancel={this.ModalCancel.bind(this, 'addModal')}
                        AirArr={this.state.AirArr}
                     
                    />
                }

                <Row>
                    <Col span={24}>
                        <Col span={12}>
                            <Card className={style.left_box}
                                bodyStyle={{ padding: "6px 24px" }}
                            >
                                <Col span={12}>燃气站点 : #1燃气站</Col>
                                <Col span={24}><br /></Col>
                                <Col span={12}>开始时间 : <DatePicker size="small" value={this.state.timeStart} onChange={this.onDatePicker.bind(this, "timeStart")} /></Col>
                                <Col span={12}>结束时间 : <DatePicker size="small" value={this.state.timeEnd} onChange={this.onDatePicker.bind(this, "timeEnd")} /></Col>
                                <Col span={24}><br /></Col>
                                <Col span={12}> 操作方向 :
                                    <Select defaultValue="全部" style={{ width: 120 }} onChange={this.onSelect} size="small" >
                                        <Option value="全部">全部</Option>
                                        <Option value="进气">进气</Option>
                                        <Option value="销售">销售</Option>
                                    </Select>
                                </Col>
                                <Col span={12} style={{ textAlign: "left" }}>
                                    <Button type="primary" size="small" onClick={this.onSave.bind(this, 1, 10)}>查询</Button> <Button size="small">重置</Button>
                                </Col>

                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card className={style.left_box}
                                bodyStyle={{ padding: "6px 24px" }}
                            >


                            </Card>
                        </Col>
                    </Col>




                </Row>
                <Container
                    style={{ height: containerHeight, position: "relative", marginTop: "1vh" }}
                    // exportBtnShow={true}
                    // exportBtn={this.exportBtn}
                    setDelConfirm={this.setDelConfirm}
                    editBtnShow={true}
                    deleteBtnShow={true}
                    editBtn={this.editBtn}
                >
                    <div className={style.Con_header}>
                        <Tag color="#87d068" onClick={this.onAir}>进气录入</Tag>

                        <Tag color="#FF9800" onClick={this.onSell}>销售录入</Tag>
                      

                      
                    </div>

                    <MyTable
                        // bordered
                        loading={loading}
                        columns={columns}
                        rowSelection={rowSelection}
                        pagination={false}
                        // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                        dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                    />
                </Container>
            </div>
        )
    }
}
export default (GasSelf);
